<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style scoped>
        .login-container {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f7fa;
        }

        .login-form {
            width: 400px;
            padding: 35px;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }

        .title {
            margin: 0 auto 30px;
            color: #333;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-container">
        <el-form
                :model="loginForm"
                ref="loginForm"
                class="login-form"
                label-position="left"
        >
            <h3 class="title">系统登录</h3>
            <el-form-item prop="username">
                <el-input
                        type="text"
                        v-model="loginForm.username"
                        auto-complete="off"
                        placeholder="账号"
                        prefix-icon="el-icon-user"
                ></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input
                        type="password"
                        v-model="loginForm.password"
                        auto-complete="off"
                        placeholder="密码"
                        prefix-icon="el-icon-lock"
                ></el-input>
            </el-form-item>
            <el-form-item prop="yzm_code">
                <el-input
                        type="text"
                        v-model="loginForm.yzm_code"
                        auto-complete="off"
                        placeholder="验证码"
                        style="width: 120px"
                        prefix-icon="el-icon-user"
                ></el-input>
                <img :src="code" @click="refreshCode"/>
            </el-form-item>
            <el-form-item>
                <el-button
                        type="primary"
                        style="width:100%"
                        @click="login"
                >登录
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</div>
</body>
</html>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loginForm: {
                    username: 'zhangsan',
                    password: '123456',
                    yzm_code: ''
                },
                code: 'verification_code',
                error: ''
            }
        },
        methods: {
            login() {
                let data = new URLSearchParams()
                data.append('method', 'login')
                data.append('username', this.loginForm.username)
                data.append('password', this.loginForm.password)
                data.append('yzm_code', this.loginForm.yzm_code)
                axios({
                    method: 'post',
                    url: 'users',
                    data: data
                }).then(resp => {
                    if (!resp.data.success) {
                        this.$message({
                            message: resp.data.error,
                            type: 'error',
                            duration: 2000
                        });
                        return
                    }
                    this.$message({
                        message: '登陆成功',
                        type: 'success',
                        duration: 1000,
                        onClose: function () {
                            localStorage.setItem('token', JSON.stringify(resp.data.data))
                            location.href = 'index.html'
                        }
                    });

                })
            },
            refreshCode() {
                console.log('刷新验证码')
                this.code = 'verification_code?param=' + new Date()
            }
        }
    })
</script>